<template>
	<div>
		<div style="background:url(http://lak110.gitee.io/gdapp/src/images/banner2.png);background-size:cover;">
			<div class="status-top"></div>
		</div>
		<ul v-infinite-scroll="getOffAmmeter" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
			<mt-cell :title="item.projectName" v-for="item in ammeterArr">
				<span style="color: #EF4F4F;margin-right: 1.27rem;">数量{{item.num}}</span>
				<span @click="goPage(item)">我要派单</span>
				<span class="iconfont icon-xuanzeqixiayige" style="margin-left: 10px;"></span>
			</mt-cell>
		</ul>
	</div>
</template>

<script>
	import {
		InfiniteScroll,
		Cell
	} from 'mint-ui';
	export default {
		components: {
			Cell
		},
		data() {
			return {
				ammeterArr: [],
				pageindex: 1,
				loading: false,
				pageSize: 20,
				totalPageCount: ''
			}
		},
		methods: {
			goPage(item) {
				this.$router.push({
					path: '/forPersonOrder',
					query: item
				})
			},
			getOffAmmeter() {
				this.$axios.post('gdiot/meter/getMeterByCompanyId', {
					"page": this.pageindex,
					"rows": this.pageSize,
					"status": 0
				}).then((p) => {
					console.log(p)
					this.totalPageCount = Math.ceil(p.data.result.total / this.pageSize)
					if (this.pageindex <= this.totalPageCount) {
						this.loading = false; //可以加载
						this.pageindex++;
						this.ammeterArr = this.ammeterArr.concat(p.data.result.rows);
					} else {
						this.loading = true; //不可以加载
						this.$mint.Toast({
							message: '没有数据啦',
							duration: 1500
						});
					}
				})
			}

		},
		created() {
		},
		mounted() {
		}
	}
</script>

<style lang="scss" scoped>
	.status-top {
		height: 2.97rem;
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-image: url(http://lak110.gitee.io/gdapp/src/images/wave.gif);
		mix-blend-mode: screen;
		vertical-align: middle;
	}

	.status-info-con {
		padding: 0.85rem;
		li {
			display: flex;
			align-items: center;
			justify-content: space-around;

		}

	}
</style>
